<!-- Tabs标签页，页面包裹层，包含页面tabs、插槽 -->
<template>
    <div class="yd-page-tabs">
        <div class="page-header">
            <div class="page-tabs">
                <el-tabs v-model="tVal">
                    <el-tab-pane v-for="(item, index) in list" :key="index" :label="item.title" :name="'' + index">
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div class="page-container">
            <slot v-if="$scopedSlots.default"></slot>
            <component v-else :is="list[tVal].component"></component>
        </div>
    </div>
</template>
<script>
export default {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: [String, Number],
            default: ''
        },
        list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {

        };
    },
    computed: {
        tVal: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('change', val);
            }
        }
    },
    mounted() {

    },
    methods: {

    }
};
</script>
<style scoped lang='scss'>
.yd-page-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
    .page-header {
        position: relative;
        background: var(--color-FFFFFF-141414);
        border: 1px solid var(--color-FFFFFF-FFFFFF_2);
        height: 76px;
        border-radius: 10px;
        padding: 0 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        // &:before {
        //     content: '';
        //     position: absolute;
        //     top: 50%;
        //     left: 0;
        //     right: 0; border-bottom: 1px solid red;
        // }

        .page-tabs {
            padding-bottom: 2px;
            ::v-deep .el-tabs {
                .el-tabs__header {
                    margin-bottom: 0;
                }
                .el-tabs__nav {
                    display: flex;
                    align-items: center;
                }
                .el-tabs__item {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 16px;
                    color: var(--color-76777A-8A8A8A);
                    &.is-active {
                        color: var(--color-1A1C1F-EBEBEB);
                        font-size: 18px;
                    }
                }

                .el-tabs__nav-wrap::after {
                    display: none;
                }

                .el-tabs__active-bar {
                    background: transparent;
                    height: 3px;

                    &:before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 50%;
                        margin-left: -11px;
                        width: 22px;
                        height: 3px;
                        background: var(--color-1A1C1F-EBEBEB);
                        border-radius: 1px 1px 1px 1px;
                    }
                }
            }
        }
    }
    .page-container {
        flex: 1;
        height: 0;
    }
}
</style>